<template>
  <div class="container">
    <div class="comment-main">
      <!-- 文本框 采用的textarea -->
      <van-field :class="'field'"
                 v-model="fieldValue"
                 rows="1"
                 autosize
                 type="textarea"
                 placeholder="说说你的评论..." />
      <span class="push-btn"
            v-if="showPushBtn"
            @click="pushBtnAction">
        发布
      </span>
      <span class="icon"
            v-else>
        <van-icon name="chat-o"
                  size="28px"
                  badge="9" />
      </span>
    </div>
  </div>
</template>
<script>
import { Field, Icon } from "vant";

export default {
  name: "gwTextAreaCommont",
  components: {
    [Field.name]: Field,
    [Icon.name]: Icon,
  },
  data() {
    return {
      // 判断是否是ios设备
      isIOS: /iPhone|iPad|iPod/i.test(window.navigator.userAgent), // 是否是IOS设备
      fieldValue: "",
      showPushBtn: false,
    };
  },
  mounted() {
    this.scrollIntoView();
    console.log("mounted");
  },
  methods: {
    pushState(state) {
      this.showPushBtn = state;
      this.$emit("pushState", state);
    },
    //调整页面scroll高度
    scrollIntoView() {
      var originalHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
      // 安卓监听键盘弹出适用
      window.addEventListener("resize", () => {
        var resizeHeight =
          document.documentElement.clientHeight || document.body.clientHeight;
        console.log("this.showPushBtn", this.showPushBtn);
        if (resizeHeight < originalHeight && this.showPushBtn === false) {
          //当软键盘弹起，在此处操作
          console.log("当软键盘弹起");
          this.pushState(true);
        } else if (this.showPushBtn === true) {
          //当软键盘收起，在此处操作
          console.log("当软键盘收起");
          this.pushState(false);
        }
        // console.log('-软键盘scrollIntoView')
        document.activeElement.scrollIntoView(true);
      });
      // ios监听键盘弹出适用
      document.body.addEventListener("focusin", () => {
        //软键盘弹出的事件处理
        if (this.isIOS) {
          console.log("ios当软键盘弹起");
          this.pushState(true);
        }
      });
      // ios监听键盘弹出适用
      document.body.addEventListener("focusout", () => {
        //软键盘收起的事件处理
        if (this.isIOS) {
          console.log("ios当软键盘收起");
          this.pushState(false);
        }
      });
    },
    // 发布评论
    pushBtnAction() {},
  },
  unmounted() {
    window.removeEventListener("resize", () => {
      console.log("移除完成");
    });
    console.log("unmounted");
  },
};
</script>
<style lang="scss" scoped>
.container {
  display: flex;
  .comment-main {
    background-color: white;
    display: flex;
    padding: 0 15px;
    margin-top: 1px;
    align-items: center;
    justify-content: space-around;
    height: auto;
    width: 100%;
    .field {
      flex: 1;
      overflow: hidden;
      border-radius: 16px;
      padding: 0;
      margin: 8px 0;
      margin-right: 10px;
      background-color: #f5f6f7;
      line-height: 0;
    }
    ::v-deep .van-field__control {
      border: none;
      padding: 0;
      padding-left: 12px;
      font-size: 14px;
      line-height: 32px;
      background-color: rgba(0, 0, 0, 0);
    }
    ::v-deep textarea.van-field__control::-webkit-input-placeholder {
      color: #c3c7cc;
    }
    .icon {
      width: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      // 修改角标数字颜色
      // ::v-deep .van-badge {
      //   color: #000;
      //   background-color: rgba(0, 0, 0, 0);
      // }
    }
    .push-btn {
      width: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 500;
      font-size: 14px;
      line-height: 20px;
      color: #2c64f2;
    }
  }
}
</style>